<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>银行卡转账</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container mt-5">
    <h3>银行卡转账</h3>
    <form id="transferForm" th:action="@{/trade/transfer}" method="post">
        <div class="mb-3">
            <label for="fromCardId" class="form-label">转出卡号</label>
            <input type="text" class="form-control" id="fromCardId" name="fromCardId" required>
        </div>
        <div class="mb-3">
            <label for="toCardId" class="form-label">转入卡号</label>
            <input type="text" class="form-control" id="toCardId" name="toCardId" required>
        </div>
        <div class="mb-3">
            <label for="amount" class="form-label">转账金额</label>
            <input type="number" class="form-control" id="amount" name="amount" required min="0.01" step="0.01">
        </div>
        <button type="submit" class="btn btn-success">确认转账</button>
        <a th:href="@{/customer/index}" class="btn btn-secondary ms-2">返回首页</a>
    </form>
    <div id="message" class="mt-3"></div>
</div>

<script>
    document.getElementById("transferForm").addEventListener("submit", function (e) {
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);
        fetch(form.action, {
            method: "POST",
            body: formData
        }).then(res => res.json())
            .then(data => {
                const msg = document.getElementById("message");
                if (data.success) {
                    msg.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
                    form.reset();
                } else {
                    msg.innerHTML = '<div class="alert alert-danger">' + data.message + '</div>';
                }
            });
    });
</script>
</body>
</html>